package myJs.cps

import myJs.myPkg.jquery.{$, JQuery}
import org.scalajs.dom.{Event, html}
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useState
import slinky.core.facade.React
import slinky.core.{FunctionalComponent, SyntheticEvent, TagElement}
import slinky.web.html._

import scala.scalajs.js

/** Created by yz on 21/1/2022
  */
@react object TextareaInlineCp {

  case class Props(
      name: String = "",
      hasBv: Boolean = false,
      formJq: JQuery = $("#form"),
      placeHolder: String = "",
      value: js.UndefOr[String] = js.undefined,
      onChange: js.UndefOr[String => Unit] = js.undefined,
      selfClassName: String = "",
      rows: String = "3",
      labelWidth: Int = 2,
      label: String,
      inputWidth: Int = 4,
  )

  val component = FunctionalComponent[Props] { props =>
    val inputRef = React.createRef[html.Input]

    val (myV, setMyV) = useState("")

    def valueChange = (e: SyntheticEvent[TagElement#RefType, Event]) => {
      val v = e.target.asInstanceOf[html.Input].value
      props.onChange.toOption match {
        case Some(f) => f(v)
        case None    => setMyV(v)
      }
    }

    val v = props.value.map { x => x }.getOrElse(myV)

    div(
      className := s"form-group",
      label(
        className := s"control-label col-sm-${props.labelWidth}",
        s"${props.label}:"
      ),
      div(
        className := s"col-sm-${props.inputWidth}",
        PureTextareaCp(
          name = props.name,
          onChange = props.onChange,
          value = props.value,
          placeHolder = props.placeHolder,
        )
      )
    )

  }

}
